//自动轮播
// var p = 0;
// function autoPlay() {
//     var timer = setInterval(() => {
//         p++;
//         if (p > 2) {
//             $(".imgContainer").css({ left: 0 });
//             p = 0;
//             fn(p);
//         } else {
//             $(".imgContainer").css({ left: -p * 1920 });
//             fn(p);
//         }

//     }, 3000);
//     $(".container").mouseenter(function () {
//         clearInterval(timer);
//     })
// }
// autoPlay();
// $(".container").mouseleave(function () {
//     autoPlay();
// })
// $(".dot span").click(function () {
//     $(".dot span").css({ background: "rgba(0, 0, 0, 0.2)" });
//     $(this).css({ background: "rgba(255, 255, 255,.4)" });
//     $(".imgContainer").animate({ left: -($(this).index()) * 1920 }, 1000);
// })
// function fn(p) {
//     $(".dot span").css({ background: "rgba(0, 0, 0, 0.2)" });
//     $(".dot span").eq(p).css({ background: "rgba(255,255,255,.5)" });
// }

//回到顶部
$(document).scroll(function () {
    let res = $(document).scrollTop();
})
$(".back").click(function () {
    $("html").animate({ scrollTop: 0 }, 1500);
})

//特色馆盒子遮罩阴影
$(function () {
    var aDiv = $('.mouseHover');    //查找出所有需要添加效果的对象
    aDiv.each(function (index) {
        aDiv.eq(index).hover(function () {
            var _width = $(this).width();    //获取当前对象的宽度
            var _height = $(this).height();    //获取当前对象的高度
            $(this)
                .css({ 'position': 'relative', })
                .append('<div class="keep" style="height:' + _height + 'px;width:' + _width + 'px;"></div><div class="ico" style="height:' + _height + 'px;width:' + _width + 'px;"></div>');        //设置遮罩层高宽等于当前对象的高宽
        }, function () {
            $('.keep').remove();
            $('.ico').remove();
        })
    })
})

//商品遮罩层
$(function () {
    var listShodow = $('.goods_list li');    //查找出所有需要添加效果的对象
    listShodow.each(function (index) {
        listShodow.eq(index).hover(function () {
            var _width = $(this).width();    //获取当前对象的宽度
            var _height = $(this).height();    //获取当前对象的高度
            $(this)
                .css({ 'position': 'relative', })
                .append('<div class="keep" style="height:' + _height + 'px;width:' + _width + 'px;"></div><div class="ico" style="height:' + _height + 'px;width:' + _width + 'px;"></div>');        //设置遮罩层高宽等于当前对象的高宽
        }, function () {
            $('.keep').remove();
            $('.ico').remove();
        })
    })
})

//发送ajax
ajax({
    url: "./getGoods.php",
    dataType: "json",
}).then(res => {
    // console.log(res);
    //渲染视图
    // renderDom(res);
    newLi(res, 0, 16, ulEle);
})

//渲染函数
let ulEle = document.querySelector(".goods_list");
let pageEle = document.querySelector(".page");
function renderDom(cartData) {
        ulEle.innerHTML = "";
        cartData.forEach(item => {
            let li = document.createElement("li");
            li.innerHTML = `
                <a href="./detail.html?goodId=${item.goodId}" target="_blank">
                    <img src="${item.img}">
                    <div class="price">
                        <p>${item.title}</p>
                        <span>￥${item.price}<s>￥${item.prices}</s></span>
                    </div>
                    <img src="./img/bfdw.png" class="bfdw">
                </a>`;
            ulEle.appendChild(li);
        })
    }

function newLi(obj, a, b, div) {
    //每页数量
    let perPag = 16;
    //计算多少页
    let totalP = Math.ceil(obj.length / perPag);
    for (i = 1; i <= totalP; i++) {
        let p = document.createElement("a")
        p.classList.add("aele")
        p.innerHTML = i;
        pageEle.appendChild(p);
    }
    let aEle = document.querySelectorAll(".aele");
    fnn(0, obj, div)
    aEle.forEach(function (item, key) {
        item.onclick = function () {
            div.innerHTML = "";
            fnn(key, obj, div)
            //每次点击回到商品区顶部
            $("html").animate({ scrollTop: 1460 }, 0);
        }
    })

}
function fnn(x, obj, div) {
    let xx = x * 16 + 16;
    if (xx > obj.length) {
        xx = obj.length;
    }
    for (let j = x * 16; j < xx; j++) {
        let li = document.createElement("li")
        li.innerHTML = `
                     <a href="./detail.html?goodId=${obj[j].goodId}" target="_blank">
                         <img src="${obj[j].img}">
                         <div class="price">
                             <p>${obj[j].title}</p>
                             <span>￥${obj[j].price}<s>￥${obj[j].prices}</s></span>
                         </div>
                         <img src="./img/bfdw.png" class="bfdw">
                     </a>`
        div.appendChild(li)
    }
}


//获取localStorage
//显示用户名
let loginEle = document.querySelector(".loginUser #loginEle");
let registerEle = document.querySelector(".loginUser #registerEle");
function checkUser() {
    let user = localStorage.getItem("username");
    if (user == null || user == "") {
        loginEle.innerHTML = "登录";
    } else {
        loginEle.innerHTML = "用户名：" + user;
        loginEle.onclick = function (e) {
            e.preventDefault();
        }
        registerEle.innerHTML = "退出";
        registerEle.onclick = function (e) {
            exit();
            e.preventDefault();
            window.location.href = "index.html";
        }
    }
}
checkUser();

//点击退出销毁缓存
function exit() {
    localStorage.removeItem("username");
    checkUser();
}

//未登陆时不能使用购物车
let gwcEle = document.querySelector("#shopping");
gwcEle.onclick = function () {
    Shopping();
}
let res = $(".quest").find("li").eq(3);
function Shopping() {
    let user = localStorage.getItem("username");
    if (user == null || user == "") {
        alert("请登录再使用购物车");
    } else {
        window.location.href = "./cart.html";
    }
}

//商品店铺二级切换
let searchEle = document.querySelector(".search ul>li")
let storeEle = document.querySelector("#store");
function OnclicSearch(){
    searchEle.style.display = "none";
    storeEle.style.display = "block";
    storeEle.style.background = "white";
    storeEle.style.zIndex = "10";  
}

searchEle.onclick = function(){
    OnclicSearch();
    storeEle.onclick = function(){
        storeEle.style.display = "none"
        searchEle.style.display = "block";
    }
}

//搜索功能
let searchBtn = document.querySelector("#searchBtn");
searchBtn.onclick = function(){
    let searchBox = document.querySelector("#searchBox");
    let phb = document.querySelector(".phb");
    if(searchBox.value == null || searchBox.value == ""){
        alert("您未输入想要查询的商品或者店铺！");
    }else{
        ajax({
            dataType:"json",
            data:{
                val: searchBox.value
            },
            url:"./search.php"
        }).then(res=>{
            phb.style.display = "none";
            pageEle.style.display = "none";
            renderDom(res);
            $("html").animate({ scrollTop: 1160 }, 0);
        })
    }
}




